<template>
	<view class="submitOrder">
		<navigator url="../../../../mine/seting/userInfo/addminAddress/addminAddress" open-type="navigate" hover-class="none">
			<view class="submitOrder-plate-1">
				<image src="../../../../../static/address.png" mode=""></image>
				<view class="txt">
					<view class="name">
						<text>{{address.consignee}}</text>
						<text>{{address.mobile}}</text>
					</view>
					<view class="addressTxt">
						{{address.address}}
					</view>
				</view>
			</view>
		</navigator>
		<view class="submitOrder-plate-2" v-for="(item,index) in pageData" :key="index">
			<view class="content" v-for="(i,num) in item.order_items" :key="num" style="margin-bottom: 20upx;">
				<view class="top-title">
					<!-- {{i.live_title}} -->
					翡翠有品
				</view>
				<view class="goods-data">
					<image :src="i.goods_pic_one" mode=""></image>
					<view class="right">
						<view class="right-top">
							<text>{{i.goods_name}}</text>
							<text>x{{i.buy_num}}</text>
						</view>
						<view class="right-center">
							<view class="tag" v-for="(a,numIndex) in i.label_names">
								{{a}}
							</view>
						</view>
						<view class="right-btm">
							<view class="price">
								¥{{i.sub_prices}}
							</view>
							<view class="count-box">
								<view class="count-box-left" @click.stop="onMinus(index,num)">
									<u-icon name="minus" color="#666" size="28"></u-icon>
								</view>
								<input type="text" v-model="i.buy_num" :disabled="true" />
								<view class="count-box-right" >
									<u-icon name="plus" color="#666" size="28" @click.stop="onPlus(index,num)"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<text>运费</text>
					</view>
					<view class="right">
						<text>¥{{i.send_fee}}</text>
					</view>
				</view>
				<view class="item" v-if="couponShow">
					<view class="left">
						<text>优惠券</text>
						<text>{{i.coupon_name}}</text>
					</view>
					<view class="right" @click="onData(index,num)">
						<text>-{{i.coupon_money}}</text>
						<u-icon name="arrow-right" color="#666" size="26"></u-icon>
					</view>
				</view>
				<view class="item" v-else>
					<view class="left">
						<text>优惠券</text>
						<text v-if="false">优惠券标题</text>
						<text v-else style="color: #fff;background-color: #f0ad4e;">{{i.count_users_coupons}}张未使用</text>
					</view>
					<view class="right" @click="onData(index,num)">
						<text>未使用</text>
						<u-icon name="arrow-right" color="#666" size="26"></u-icon>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<text>订单备注</text>
						<input type="text" v-model="remark" placeholder="选填" />
					</view>
					<view class="right">
						<u-icon name="arrow-right" color="rgba(0,0,0,0)" size="26"></u-icon>
					</view>
				</view>
				<view class="btm">
					<text>共{{i.buy_num}}件</text>
					<text>小计：</text>
					<text>¥{{parseFloat(i.sub_total)* parseFloat(i.buy_num)-parseFloat(i.coupon_money)}}</text>
				</view>
			</view>
		</view>
		<view class="submitOrder-plate-3">
			<view class="content">
				<view class="item">
					<view class="left">
						<text>商品总价</text>
					</view>
					<view class="right">
						<text>¥{{pay_total}}</text>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<text>运费</text>
					</view>
					<view class="right">
						<text>¥{{send_fee}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="subBtn">
			<text>共{{pay_num}}件</text>
			<text>合计：</text>
			<text>¥{{pay_total}}</text>
			<button class="bg-btn" @click="onPay" v-if="type == 1">提交订单</button>
			<button class="bg-btn" @click="onPayCart" v-else>提交订单</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:0,
				pageData:'',//页面数据
				pay_total:'',//合计金额
				send_fee:0,//运费
				address:'',//地址
				pay_num:'',
				option:'',
				goodsIndex:0,//优惠券页面接收回来的商品下标
				goodsNum:0,//优惠券页面接收回来的商品下标
				coupon_price:0,//优惠券金额
				coupon_title:'',//优惠券标题
				coupon_id:0,//优惠券id
				couponShow:false,//是否显示优惠券减
				remark:'',//备注
				type:1,//1是单订单支付，2是多订单支付
				cartSubmit:'',//多商品预提交
			};
		},
		onShow() {
			// this.getPageData()
		},
		onLoad(option) {
			this.id = option.id
			this.type = option.type
			this.cartSubmit = option.cartSubmit
			let e = uni.getStorageSync('old_data')
			if (e == '') {
				this.getPageData()
			} else{
				Object.assign(this.$data,e)
			}
			if (option.coupon_id !== ''&&option.coupon_id !== null && option.coupon_id !== undefined) {
				this.goodsIndex = option.goodsIndex
				this.goodsNum = option.goodsNum
				this.coupon_price = option.coupon_price
				this.coupon_title = option.coupon_title
				this.coupon_id = option.coupon_id
				this.couponShow = true
				this.pageData[this.goodsIndex].order_items[this.goodsNum].coupon_name = this.coupon_title
				this.pageData[this.goodsIndex].order_items[this.goodsNum].coupon_money = this.coupon_price
				let price = 0
				for (let i = 0; i < this.pageData.length; i++) {
					for (let a = 0; a < this.pageData[i].order_items.length; a++) {
						price = price + (parseFloat(this.pageData[i].order_items[a].buy_num) * parseFloat(this.pageData[i].order_items[a].sub_prices) - parseFloat(this.pageData[i].order_items[a].coupon_money))
					}
				}
				this.pay_total = price
			} else{
				console.log('未使用优惠券')
			}
			
		},
		methods: {
			// 多商品订单支付
			onPayCart(){
				console.log(1231)
			},
			// 单商品订单支付
			onPay(){
				console.log(this.pay_total)
				uni.request({
				    url:this.$Url +'/index.php/App/order/weixinPay',
				    method:'POST',
				    data:{
				       consignee:this.address.consignee,
					   user_mobile:this.address.mobile,
					   address_id:this.address.address_id,
					   pay_type:1,
					   live_program_id:'',
					   order_from:7,
					   goods_id:this.id,
					   goods_num:this.pay_num,
					   type:1,
					   coupon_ids:this.coupon_id,
					   information:this.remark,
					   openid:uni.getStorageSync('openId'),
					   fee:this.pay_total
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
						if (res.data.status == 200) {
							uni.requestPayment({
								provider:'wxpay',
								timeStamp:res.data.data.timeStamp,
								nonceStr:res.data.data.nonceStr,
								package:res.data.data.package,
								signType:res.data.data.signType,
								paySign:res.data.data.paySign,
								success: (e) => {
									uni.navigateTo({
										url:'payForSuccess/payForSuccess?id=' + this.id + '&price=' + this.pay_total + '&time=' + res.data.data.timeStamp
									})
								},
								fail: (err) => {
									uni.showToast({
										title:'支付失败',
										icon:'none'
									})
								}
							})
						} else{
							uni.showToast({
								title:res.data.msg,
								icon:'none',
								duration:1200
							})
						}
				    }
				})
			},
			// 使用优惠券
			onData(index,num){
				uni.setStorage({
					key:'old_data',
					data:this.$data,
					success() {
						uni.redirectTo({
							url:'../../../../mine/coupon/coupon?mode=2&goodsIndex=' + index + '&goodsNum=' + num
						})
					}
				})
			},
			// 增加
			onPlus(index,num){
					this.pageData[index].order_items[num].buy_num ++
					this.pay_total = parseFloat(this.pay_total ) + parseFloat(this.pageData[index].order_items[num].sub_prices)
					this.pay_num ++
			},
			// 减少
			onMinus(index,num){
				if (this.pageData[index].order_items[num].buy_num > 1) {
					this.pageData[index].order_items[num].buy_num --
					this.pay_num --
					this.pay_total = parseFloat(this.pay_total ) - parseFloat(this.pageData[index].order_items[num].sub_prices)
				} else{
					uni.showToast({
						title:'不能再少了～',
						icon:'none',
						duration:1200
					})
				}
			},
			// 请求页面数据
			getPageData(){
				uni.request({
				    url:this.$Url +'/index.php/App/order/orderCalculate',
				    method:'POST',
				    data:{
						type:this.type,
				       live_program_id:'',
					   goods_id:this.id,
					   cart_item_mes:this.cartSubmit
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
						if (res.data.status == 200) {
							this.pageData = res.data.data.cart_item_list
							this.pay_total = res.data.data.pay_total
							this.send_fee = res.data.data.send_fee
							this.address = res.data.data.address
							let num = 0
							let price = 0
							for (let i = 0; i < this.pageData.length; i++) {
								for (let a = 0; a < this.pageData[i].order_items.length; a++) {
									num = num  + parseFloat(this.pageData[i].order_items[a].buy_num)
									price = price + parseFloat(this.pageData[i].order_items[a].buy_num) * parseFloat(this.pageData[i].order_items[a].sub_prices)
								}
							}
							this.pay_num = num
							this.pay_total = price
						} else{
							uni.showToast({
								title:res.data.msg,
								icon:'none',
								duration:1200
							})
							setTimeout(()=> {
								uni.navigateBack({
									delta:1
								})
							}, 1200);
						}
				    }
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.submitOrder {
		width: 100vw;
		min-height: 100vh;
		background-color: #f7f7f7;
		padding-top: 20upx;
		.submitOrder-plate-1 {
			height: 120upx;
			background-color: #fff;
			display: flex;
			align-items: center;

			image {
				width: 50upx;
				height: 50upx;
				margin-right: 35upx;
				margin-left: 40upx;
			}

			.txt {
				color: #666;
				font-size: 22upx;

				.name {
					text:first-child {
						margin-right: 20upx;
					}
				}

				.addressTxt {
					margin-top: 16upx;
				}
			}
		}
		.submitOrder-plate-2{
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			margin-top: 50upx;
			.content{
				width: 710upx;
				background-color: #FFFFFF;
				border-radius: 20upx;
				.top-title{
					font-size: 30upx;
					color: #333;
					width: 100%;
					height: 106upx;
					display: flex;
					align-items: center;
					padding-left: 30upx;
					border-bottom: 1upx solid #eee;
				}
				.goods-data{
					margin-top: 20upx;
					display: flex;
					justify-content: space-between;
					margin-left: 30upx;
					margin-right: 30upx;
					>image{
						width: 150upx;
						height: 150upx;
						margin-right: 20upx;
					}
					.right{
						display: flex;
						flex-direction: column;
						.right-top{
							display: flex;
							justify-content: space-between;
							text:nth-child(1){
								font-size: 26upx;
								color: #333;
								width: 400upx;
								overflow: hidden;
								 -webkit-line-clamp: 1;
								 text-overflow: ellipsis;
								 display: -webkit-box;
								 -webkit-box-orient: vertical;
							}
							text:nth-child(2){
								font-size: 22upx;
								color: #999;
							}
						}
						.right-center{
							display: flex;
							align-items: center;
							justify-content: space-between;
							flex-wrap: wrap;
							width: 490upx;
							margin: 15upx 0;
							.tag{
								width: 105upx;
								height: 32upx;
								display: flex;
								align-items: center;
								justify-content: center;
								color: $zhuti-color;
								font-size: 20upx;
								margin-bottom: 5upx;
							}
						}
						.right-btm{
							display: flex;
							justify-content: space-between;
							align-items: center;
							.price{
								font-size: 24upx;
								color: #333;
							}
							.count-box{
								display: flex;
								align-items: center;
								justify-content: center;
								width: 200upx;
								height: 50upx;
								border-radius: 20upx;
								border: 1upx solid #e4e4e4;
								input{
									width: 90upx;
									height: 50upx;
									background-color: #f6f6f6 ;
									text-align: center;
								}
								.count-box-left,.count-box-right{
									width: 50upx;
									height: 50upx;
									display: flex;
									align-items: center;
									justify-content: center;
								}
							}
						}
					}
					
				}
				.item{
					height: 80upx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 30upx;
					.left{
						display: flex;
						align-items: center;
						text:nth-child(1){
							color: #333;
							font-size: 30upx;
							margin-right: 20upx;
						}
						text:nth-child(2){
							color: #9d9d9d;
							font-size: 22upx;
						}
					}
					.right{
						display: flex;
						align-items: center;
						text{
							font-size: 22upx;
							color: #333;
						}
					}
				}
				.btm{
					height: 125upx;
					border-top: 1upx solid #eee;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					padding-right: 30upx;
					text:first-child{
						font-size: 24upx;
						color: #999;
						margin-right: 20upx;
					}
					text:nth-child(2){
						font-size: 26upx;
						color: #333;
						margin-right: 10upx;
					}
					text:last-child{
						font-size: 26upx;
						color: #b90000;
					}
				}
			}
		}
		.submitOrder-plate-3{
			width: 710upx;
			background-color: #FFFFFF;
			border-radius: 20upx;
			margin: 20upx auto;
			.item{
				height: 80upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 30upx;
				.left{
					display: flex;
					align-items: center;
					text:nth-child(1){
						color: #333;
						font-size: 30upx;
						margin-right: 20upx;
					}
					text:nth-child(2){
						color: #9d9d9d;
						font-size: 22upx;
					}
				}
				.right{
					display: flex;
					align-items: center;
					text{
						font-size: 22upx;
						color: #b90000;
					}
				}
			}
		}
		.subBtn{
			width: 100vw;
			height: 105upx;
			background-color: #fff;
			display: flex;
			align-items: center;
			position: fixed;
			bottom: 0;
			left: 0;
			justify-content: flex-end;
			padding-right: 30upx;
			text:nth-child(1){
				color: #999;
				font-size: 22upx;
				margin-right: 20upx;
			}
			text:nth-child(2){
				color: #333;
				font-size: 24upx;
				margin-right: 10upx;
			}
			text:nth-child(3){
				color: #b90000;
				margin-right: 20upx;
				font-size: 22upx;
			}
			button{
				width: 256upx;
				height: 80upx;
				display: flex;
				align-items: center;
				color: #fff;
				font-size: 32upx;
				justify-content: center;
				margin: 0;
			}
		}
	}
</style>
